<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>lxp_test</title>
		
    <!-- bootstrap.css -->
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <!-- jquery -->
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <!-- bootstrap.js -->
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  	<!-- angular -->
  	<script src="../AngularJS/angular-1.5.0/angular.min.js"></script>
  	<!-- jquery-validation 表单验证-->
  	<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
		<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
		<script src="../My97DatePicker/WdatePicker.js"></script>
  </head>

  
  
  <body ng-app="app" ng-controller="appCtrl">

  <input   ng-model="aa" ng-change="cc()" onchange="bb()" id="d12" type="text"/>
<img onclick="WdatePicker({el:'d12'})" src="../skin/datePicker.gif" width="16" height="22" align="absmiddle">

<div>{{aa}}</div>
<br />
<input class="Wdate" type="text"  ng-model="bb" onfocus="WdatePicker({isShowClear:false,readOnly:true})" datepicker/>{{bb}}
  <hr />
  <input class="Wdate" ng-model="sdate" type="text"  start-picker />
  {{mm}}
  
  <hr />
   <input class="Wdate" ng-model="vv" type="text"  date-picker />
  {{vv}}
  </body>
  
  <script>
var app = angular.module('app',[]);
app.controller("appCtrl",function($scope){  
	$scope.datas = {};
	$scope.cc = function(){
			console.log("cc")
		console.log($scope.aa)
	}
	
	
});
app.directive('datepicker', function () {
        return {
            restrict: 'A', 
            require: '?ngModel',
            scope: {},
            link: function (scope, element, attrs, ngModel) {
                if (!ngModel) return; // do nothing if no ng-model
                element.bind('blur keyup change', function() {
                    scope.$apply(ngModel.$setViewValue(this.value));
                });
            }
        };
    });



app.directive('startPicker', function () {
        return {
            restrict: 'A',
            scope: false,
            link: function (scope, element, attrs) {
               element.bind('click',function(){ 
               	console.log(scope.mm)
               			window.WdatePicker({
               					onpicked:function(){
               							scope.$apply(function(){
               									scope.datas.state = element.val();
               							});
               					},
               					oncleared:function(){
	               						scope.$apply(function(){
	               								 scope.datas.state=element.val();
	               						});
               					},
               					dateFmt:'yyyy-MM-dd'
               			})
               })
              
            }
        };
    });


app.directive('datePicker', function () {
	    return {
	        restrict: 'A',
	        require: 'ngModel',
//	        scope: {
//	            minDate: '@',
//	        },
	        link: function (scope, element, attr, ngModel) {

	            element.val(ngModel.$viewValue);

	            function onpicking(dp) {
	                var date = dp.cal.getNewDateStr();
	                scope.$apply(function () {
	                    ngModel.$setViewValue(date);
	                });
	            }
	            //function onpicked(dp){
	            	//$(dp.el).validationEngine('validate');
	            //}
	            function oncleared(){
	            	scope.$apply(function () {
	                    ngModel.$setViewValue("");
	                });
	            }
	          
	            element.bind('click', function () {
	                WdatePicker({
	                    onpicking: onpicking,
//	                    oncleared: oncleared,
//	                    onpicked: onpicked, 
	                    dateFmt: (attr.datefmt || 'yyyy-MM-dd')
//	                    minDate: (scope.minDate || '%y-%M-%d'),
	                })
	            });
	        }
	    };
	}); 


function bb(){
	console.log("bb")
	console.log()
}


/*
   angular.module('My97Ext', []).directive('datepicker', function () {
        return {
            restrict: 'A',
            require: '?ngModel',
            scope: {},
            link: function (scope, element, attrs, ngModel) {
                if (!ngModel) return; // do nothing if no ng-model
                element.bind('blur keyup change', function() {
                    scope.$apply(ngModel.$setViewValue(this.value));
                });
            }
        };
    });
*/



</script>
  
  
</html>